<template>
  <div class="details-box">
    <div class="details-top">
      <div class="info">
        发布时间：&nbsp;{{LogRes.uploadTime}}
        <br>
        发布地点：&nbsp;{{LogRes.uploadAddr}}
        <br>
        发布人员：&nbsp;{{LogRes.uploader}}
        <br>
        所属项目：&nbsp;{{LogRes.uploadProj}}
      </div>
    </div>
    <div class="details-bot">
      <div class="describe">
        &nbsp;&nbsp;&nbsp;&nbsp;{{LogRes.describe}}
      </div>
      <div class="pic" v-for="(item,index) in LogRes.pic" :key="index">
        <img :src="item" alt="">
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue"

const LogRes = reactive({
  uploadTime:'2024-1-16 11:45',
  uploadAddr:'辽宁省',
  uploader:'张三',
  uploadProj:'2022年新宾高标准农田',
  describe:'机耕路平整',
  pic:[require("@/assets/images/ProjectImages/p4.jpg"),require("@/assets/images/ProjectImages/p6.jpg")],
})
</script>

<style scoped lang="less">
.details-box{
  height: auto;
  margin: 20px auto;
  width: 710px;
  margin-bottom: 150px;
  border: 1px solid lightgray;
  border-radius: 15px;
  box-shadow: 0 0 15px lightgray;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  .details-top{
    width: 100%;
    height: 230px;
    border-bottom: 1px solid rgba(29,207,145,.5);
    display: flex;
    font-size: 28px;
    align-items: flex-start;
    line-height: 55px;
    padding-bottom: 5px;
    .info{
      text-align: left;
      width: 80%;
      margin: 0 auto;
    }
  }
  .details-bot{
    font-size: 32px;
    padding-top: 15px;
    padding-bottom: 50px;
    .describe{
      padding: 20px;
      margin-bottom: 30px;
      text-align: left;
    }
    .pic{
      img{
        width: 90%;
        margin: 10px auto;
      }
    }
  }
}
</style>